<template>
  <div class="home">
    <el-container class="container">
      <el-header>
        <el-header>
          <div class="header_div">
            <img src="../assets/logo2.jpg" />
            <div class="header_btn">
              <el-button>消息</el-button>
              <el-button>设置</el-button>
              <el-button>安全退出</el-button>
            </div>
          </div>
        </el-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">导航一</span>
              </template>
              <el-menu-item-group>
                <span slot="title">分组一</span>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <span slot="title">选项4</span>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main> 
        <!--主体-->
        <table class="table table-hover">
          <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>手机号</td>
            <td>性别</td>
            <td>年龄</td>
            <td>专业</td>
            <td>操作</td>
            
          </tr>
        </table>
        
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .container {
    height: 100%;
    .header_div {
      display: flex;
      justify-content: space-between;
      height: 100%;
      align-items: center;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 199px;
    min-height: 400px;
    height: 100%;
  }

  .el-header {
    background-color: #0097da;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 100%;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>
